<template>
    <div class="row">
            <div v-for="colunm in columnList" :key="colunm.id" class="col-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body text-center">
                        <img :src="colunm.avatar" :alt="colunm.title" class="rounded-circle border border-light w-25 my-3">
                        <h5 class="card-title">标题：{{colunm.title}}</h5>
                        <p class="card-text text-left">简介：{{colunm.description}}</p>
                        <!-- <router-link class="btn btn-outline-primary" @click="Back">进入专栏</router-link> -->
                        <a href="#" class="btn btn-outline-primary" @click="Back(colunm)">进入专栏</a>
                    </div>
                </div>
            </div>
        </div>
</template>

<script lang="ts">
import { defineComponent,PropType,computed,ref } from 'vue'
import { useRouter } from 'vue-router'
// import router from '../router'
export interface Content{
    id?:number,
    // 标题
    title:string,
    // 图片
    avatar?:string,
    // 内容
    description:string
}
export default defineComponent({
    name:'GlobalContent',
    props:{
        list:{
             type: Array as PropType<Content[]>,
             required: true
        }    
    },
    setup (props) {
        const router = useRouter()

        const columnList = computed(()=>{
            return props.list.map( column => {
                if(!column.avatar){
                    column.avatar = require('@/assets/default.jpg')
                }
                return column
            } )
        })
        const Back = (Colunm: { id: any })=>{
            router.push({
                path:'/list',
                query:{
                    ans:Colunm.id
                }
            })
        }
        return {columnList,Back}
    }
})
</script>

<style scoped>

</style>
